<template>
  <div class="FooterNav">
    <div class="title">合作单位</div>
    <div class="line"></div>
    <div class="icongroup">
      <img src="../assets/signin/scut.png" />
      <img src="../assets/signin/sysu.png" />
      <img src="../assets/signin/cuhk.png" />
      <img src="../assets/signin/cma.png" />
      <img src="../assets/signin/gdms.png" />
    </div>
    <!-- width="256" -->
    <!-- height="128" -->
    <!-- <div class="map">
      <a href="https://www.revolvermaps.com/livestats/5y5mvks5bi1/"></a>
      <img
        src="//rf.revolvermaps.com/h/m/a/0/ff0000/128/0/5y5mvks5bi1.png"
        alt="Map"
        style="border: 0; width:18vw"
      />
    </div>-->
  </div>
</template>

<script>
export default {
  name: "FooterNav",
  methods: {}
};
</script>

<style scoped>
.FooterNav {
  display: flex;
  /* height: 150px; */
  flex-direction: column;
  background: rgba(180, 216, 218, 1);
  align-items: center;
  border-radius: 10px;
  justify-content: space-around;
  margin-top: auto; /* 将最后一个元素推到底部 */
  width: 100%;
}
.title {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 43.2px;
  color: rgba(20, 102, 140, 1);
  text-align: center;
  vertical-align: middle;
  margin: 2vw 0 1vw 0;
}
.line {
  width: 20vw;
  height: 0.5vh;
  opacity: 1;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.7);
  margin: 0 0 2vw 0;
}
.icongroup {
  display: flex;
  justify-content: space-around;
  /* width:50%; */
  flex-direction: row;
  margin: 0 0 5vw 0;
  gap: 2vw;
}

.icongroup img {
  /* height: 128px; */
  width: 10vw;
}
.map {
  /* width:30% */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>